import React, { useState, useEffect } from 'react';
import { Select } from 'antd';
import { getChannelsList } from 'api/channel';
const { Option } = Select;
export default function ChannelSelect(props) {
  // 此处接收的value和onChange已经由Form.Item组件封装了,所以能直接接收
  // console.log(props);
  const { value, onChange } = props;
  const [channelsList, setChannelsList] = useState([]);
  // 获取频道列表
  const getChannels = async () => {
    const res = await getChannelsList();
    setChannelsList(res.data.channels);
  };
  useEffect(() => {
    getChannels();
  }, []);
  return (
    <Select
      allowClear
      style={{ width: 200 }}
      placeholder="选择频道"
      value={value}
      onChange={onChange}
    >
      {channelsList.map((item) => {
        return (
          <Option value={item.id} key={item.id}>
            {item.name}
          </Option>
        );
      })}
    </Select>
  );
}
